<template>
    <div class="container">
        <h1> MY TODO {{ todoCount }}</h1>
        <ul class="list-group">
            <li v-for="(todo,index) in todos"
                v-bind:class="{'completed' : todo.completed}"
                class="list-group-item">
                {{ todo.title}}
                <button
                        v-on:click="ToggleCompleted(todo)"
                        v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                        class="btn btn-xs pull-right">
                    {{todo.completed ? 'Done' : 'Do'}}
                </button>
                <button

                        v-on:click="deleteTodo(index)"
                        class="btn btn-warning btn-xs pull-right">
                    Delete
                </button>

            </li>
        </ul>
        <form v-on:submit.prevent="addTodo(newTodo)">
            <div class="from-group">
                <input
                        class="form-control"
                        v-model="newTodo.title"
                        type="text">
            </div>
            <div class="from-group">
                <button class="btn btn-success pull-right" type="submit">Add Todo</button>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: "home",
        data() {
            return {
                todos: [
                    {id: 1, title: "Vue.js", completed: false}
                ],
                newTodo: {id: null, title: "", completed: false}
            }
        },
        computed: {
            todoCount() {
                return this.todos.length
            }
        },
        methods: {
            addTodo(newTodo) {
                this.todos.push(newTodo);
                this.newTodo = {id: null, title: "", completed: false}
            },
            deleteTodo(index) {
                this.todos.splice(index, 1)
            },
            ToggleCompleted(todo) {
                todo.completed = !todo.completed
            }
        }
    };
</script>
<style>
    .completed {
        color: #5cb85c;
        text-decoration: line-through;
    }
</style>
